<template>
  <div class="permission">
    <div class="operate">
      <div>
        <a-select :size="size" style="width: 9vw" v-model="queryInfo.b0202"  >
          <a-select-option v-for="(item, index) in this.dictData.b0202" @click="addTask(item)" :value="item.dictKey" :key="index">
            {{ item.dictValue }}
          </a-select-option>
        </a-select>
        <div style="flex: 0 0 auto; margin-left: 20px; height: 40px">
          <ep-button class="btn1" @click="selectAll">{{checkTitle}}</ep-button>
          <ep-button class="btn1 btn-con" @click="delBatch">批量删除</ep-button>
        </div>
        <div style="flex: 0 0 auto">
          <a-select
              show-search
              label-in-value
              :value="value"
              placeholder="请输入查询的点位名称"
              style="width: 200px;"
              :filter-option="false"
              :not-found-content="fetching ? undefined : null"
              @search="fetchUser"
              @change="handleChange"
          >
            <a-spin v-if="fetching" slot="notFoundContent" size="small" />
            <a-select-option v-for="d in data" :key="d.value">
              {{ d.text }}
            </a-select-option>
          </a-select>
<!--          <ep-search v-model="queryInfo.b0102" :size="size" style="margin-left: 15px" placeholder="请输入关键字搜搜...."-->
<!--            enter-button="chaxun" @search="() => {-->
<!--              this.queryInfo.pageNum = 1;-->
<!--              this.queryInfo.pageSize = 20;-->
<!--              this.listQuery();-->
<!--            } ">-->
<!--          </ep-search>-->
        </div>
        <div style="flex: 0 0 auto; margin-left: 20px; height: 40px">
          <ep-button class="btn1" @click="()=>{this.currentPageChange(this.queryInfo.prePage)}" :disabled="!this.queryInfo.hasPreviousPage">上一页</ep-button>
          <span style="color: black">当前页:{{this.queryInfo.pageNum}}</span>
          <ep-button class="btn1 btn-con" @click="()=>{this.currentPageChange(this.queryInfo.nextPage)}" :disabled="!this.queryInfo.hasNextPage">下一页</ep-button>
          <span style="color: black">总页数:{{this.queryInfo.pages}}</span>
        </div>
      </div>
    </div>
    
    <!--上传图片弹窗-->
    <a-modal
        :title="modalTitle"
        centered
        style="top: 20px"
        width="50%"
        destroyOnClose
        v-model="imgVisible"
        cancelText="关闭"
        okText="保存"
        @ok="handleForm"
    >
      <character-scene-manager-media ref="characterSceneManagerMedia" :disabled="disabled"/>
    </a-modal>
    
    <!--上传视频弹窗-->
    <a-modal
        :title="modalTitle"
        centered
        style="top: 20px"
        width="50%"
        destroyOnClose
        v-model="videoVisible"
        cancelText="关闭"
        okText="保存"
        @ok="handleForm"
    >
      <protect-project-video ref="videoInfoItem"  :disabled="disabled"></protect-project-video>
    </a-modal>
    <!--上传三维视图弹窗-->
    <a-modal
        :title="modalTitle"
        centered
        style="top: 20px"
        width="50%"
        destroyOnClose
        v-model="modelVisible"
        cancelText="关闭"
        okText="保存"
        @ok="handleForm"
    >
      <protect-project-model ref="modelInfoItem"  :disabled="disabled"></protect-project-model>
    </a-modal>

<!--    详情-->
    <a-modal
        :title="modalTitle"
        centered
        style="top: 20px"
        width="80%"
        destroyOnClose
        v-model="visible"
        cancelText="关闭"
        okText="保存"
        @ok="handleForm"
        :ok-button-props="{ props: { disabled: okButtonDisabled } }"
    >
      <pointInfo
          ref="pointInfo"
          :b0101="objectInfo.b0101"
          :saveFlag="saveFlag"
          :c0303="'1'"
          :flag="flag"
      />
    </a-modal>

    <div class="list-information">
      <ul>
        <li v-for="(item,index) in informationDate" :key="index">
          <div class="item-top">
              <div class="item-subtitle">{{item.name}}</div>
              <a-checkbox :checked="item.checked" @change="onChange($event,index)">选择</a-checkbox>
          </div>
          <div class="item-bottom">
            <a-tag color="pink">
              {{ item.title }}
            </a-tag>
            <div v-if="item.b0202=='1'">
              <img  :src="item.icon"  @click="checkImg(item.b0205)"/>
            </div>
            <div v-if="item.b0202==='2'">
              <video :src="item.icon" controls style="width: 100%; height: 160px; border-radius: 4px; margin-bottom: 20px;"></video>
            </div>
            <div v-if="item.b0202==='5'">
              <img src="@/assets/img/icon-file.png" controls style="width: 100%; height: 160px; border-radius: 4px; margin-bottom: 20px;" @click="view3DModel(item.b0205)"></img>
            </div>
            <!-- 修改为 video 标签 -->
            <div style="flex: 0 0 auto;margin: 0 10px;">
              <ep-button class="btn2" @click="queryDetail(item)">详情</ep-button>
              <ep-button class="btn2 btn2-con" @click="del(item.b0201)">删除</ep-button>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <a-modal
        :title="modalTitle"
        centered
        style="top: 20px"
        width="65%"
        destroyOnClose
        v-model="showModelVisible"
        cancelText="关闭"
        :ok-button-props="{ props: { disabled: okButtonDisabled } }"
    >
      <model-obj :src="modelInfo.url"  />
    </a-modal>
  </div>
</template>

<script>
import characterSceneManagerMedia from "@/pages/system/form/characterSceneManagerMedia";
import protectProjectVideo from "@/pages/system/form/protectProjectVideo";
import protectProjectModel from "@/pages/system/form/protectProjectModel";
import {ModelObj} from 'vue-3d-model';
import modal from "ant-design-vue/es/modal";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import {
  operateB02Info,getB02InfoList, getResourceObjectList,
} from "@/services/system/whdngxlApi";
import pointInfo from "@/pages/whdngxl/pointInfo";
import { fileShowUrl } from "@/services/system/api";
import { TreeSelect } from "ant-design-vue";
import EpButton from "@/components/assembly/button";
import ZhTable from "@/components/zh-table/ZhTable";
import ColumnManage from "@/components/assembly/columnManage";
import { mapGetters } from "vuex";
import debounce from 'lodash/debounce';
export default {
  name: "PatrolPsConfig",
  components: {
    ColumnManage,
    EpButton,
    // PatrolPsAllot,
    ZhTable,
    characterSceneManagerMedia,
    protectProjectVideo,
    protectProjectModel,
    pointInfo,
    ModelObj
  },
  computed: {
    ...mapGetters(["size"]),
  },
  data() {
    this.fetchUser = debounce(this.fetchUser, 800);
    return {
      data: [],
      value: [],
      fetching: false,
      checkTitle: '全选',
      fileShowUrl: fileShowUrl, //预览接口地址
      queryInfo: {
        b0101: null,
        b0102: "",
        b0202: "",
        d0706: "1",
        manageAreas: undefined,
        pageNum: 1,
        pageSize: 20,
        hasNextPage: false,
        hasPreviousPage: false,
        nextPage: 0,
        prePage: 0,
        pages: 0
      },
      dictData: {
        b0202: [
          {dictField: "b0202",dictKey: "1",dictValue:"图片上传",fieldName: "任务表",fixed: "0",status: "1",sysId: 600592},
          {dictField: "b0202",dictKey: "2",dictValue:"视频上传",fieldName: "任务表",fixed: "1",status: "2",sysId: 600593},
          {dictField: "b0202",dictKey: "3",dictValue:"三维模型上传",fieldName: "任务表",fixed: "3",status: "3",sysId: 600594},
        ],
        b0104: [],
      },
      //列表信息
      informationDate:[
        // {name:'1459597505.jpg',icon:'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',checked:true},
        // {name:'1459597505.jpg',icon:'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',checked:false},
        // {name:'1459597505.jpg',icon:'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',checked:false},
        // {name:'1459597505.jpg',icon:'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',checked:false},
        // {name:'1459597505.jpg',icon:'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',checked:false},
        // {name:'1459597505.jpg',icon:'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',checked:false},
        // {name:'1459597505.jpg',icon:'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',checked:false},
        // {name:'1459597505.jpg',icon:'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF',checked:false},
      ],
      modalTitle:null,
      imgVisible: false,
      videoVisible: false,
      disabled: false,
      objectInfo: {},
      okButtonDisabled: false,
      visible: false,
      saveFlag: false,
      flag: "",
      modelVisible:false,
      showModelVisible:false,
      modelInfo: {
        url: null
      },
    };
  },
  mounted() {},
  created() {
    // 数据初始化
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    view3DModel(showId) {
      this.modelInfo.url=this.fileShowUrl + showId;
      this.showModelVisible = true;
    }
    ,checkImg(showId) {
      let url = this.fileShowUrl + showId;
      window.open(url, "_blank");
    },
    fetchUser(value) {
      console.log('fetching user', value);
      this.data = [];
      this.fetching = true;
      this.$http
          .post(getResourceObjectList, {pageNum: 1,pageSize: 50,b0102: value,filterVOList: [{data: value,fuzzyQuery: true,property: 'b0102'}],orderVOList: []})
          .then((res) => {
            const data = res.result.list.map(b01 => ({
              text: `${b01.b0102}`,
              value: b01.b0101,
            }));
            this.data = data;
            this.fetching = false;
          })
          .catch((err) => {
            this.fetching = false;
          });
    },
    handleChange(value) {
      this.value = value;
      this.queryInfo.b0101 = value.key
      this.queryInfo.pageNum = 1;
      this.queryInfo.pageSize = 20;
      this.listQuery();
    },
    init() {
      //获取初始化数据
      this.queryInfo.b0202 = this.dictData.b0202[0].dictKey;
      // this.listQuery()
    },
    //全选
    selectAll(){
      this.informationDate.forEach((item,index) => {
        item.checked = this.checkTitle === '全选'
        this.$set(this.informationDate[index], 'checked', this.checkTitle === '全选');
      })
      if(this.checkTitle === '全选'){
        this.checkTitle = '全不选'
      }else {
        this.checkTitle = '全选'
      }
    },
    onChange(e,index) {
      this.informationDate[index].checked = e.target.checked;
    },
    //上传图片、视频
    addTask(item) {
      if(!this.queryInfo.b0101){
        modal.warn({
          title: "警告提升",
          content: "请先查询到具体的点位信息",
        });
        return;
      }
      this.modalTitle = item.dictValue;
      if(item.dictKey == 1){ //图片上传
        this.imgVisible = true;
        this.$nextTick(() => {
          this.$refs.characterSceneManagerMedia.editFlag = this.editFlag
          this.$refs.characterSceneManagerMedia.init(null);
        });
      }else if(item.dictKey == 2){ //视频上传
        this.videoVisible = true;
        this.$nextTick(() => {
          this.$refs.videoInfoItem.editFlag = this.editFlag;
          this.$refs.videoInfoItem.init(null);
        });
      }else if (item.dictKey == 3){ //模型上传
        this.modelVisible = true;
        this.$nextTick(() => {
          this.$refs.modelInfoItem.editFlag = this.editFlag;
          this.$refs.modelInfoItem.init(null);
        });
      }
    },
    createInformationDate(list){
      this.informationDate = []
      if(list.length > 0){
        list.forEach(item =>{
          const e = {}
          e.name = item.b0205Name + '-' + item.b0102
          e.b0205 = item.b0205
          if(item.b0202 === '1'){
            e.icon = this.fileShowUrl + (item.b0205? item.b0205:'c1f62896c316438bafff5acfbce31e95')
            e.title = '图片'
          }else if(item.b0202 === '2'){
            e.icon = this.fileShowUrl + (item.b0205? item.b0205:'c1f62896c316438bafff5acfbce31e95')
            e.title = '视频'
          }else if (item.b0202 === '5'){
            e.icon = this.fileShowUrl + (item.b0205? item.b0205:'c1f62896c316438bafff5acfbce31e95')
            e.title = '三维模型'
          }
          e.checked = false
          e.b0101 = item.b0101
          e.b0201 = item.b0201
          e.b0202= item.b0202
          this.informationDate.push(e)
        })
      }
    },
    handleForm() {
      if(this.modalTitle === '图片上传'){
        const data = this.$refs.characterSceneManagerMedia.dataInfo
        const b02 = {}
        b02.b0101 = this.queryInfo.b0101
        b02.flag = 'save'
        b02.b0202 = '1'
        b02.b0203 = data.k0406
        b02.b0205 = data.k0407
        b02.b0205Name = data.k0408
        this.$http
            .post(operateB02Info, b02)
            .then((res) => {
              this.listQuery()
              this.imgVisible = false;
              this.videoVisible = false;
              this.visible = false;
            })
            .catch((err) => {

            });
      }else if(this.modalTitle === '视频上传'){
        const data = this.$refs.videoInfoItem.mediaInfoItem
        const b02 = {}
        b02.b0101 = this.queryInfo.b0101
        b02.flag = 'save'
        b02.b0202 = '2'
        b02.b0203 = data.h1303
        b02.b0205 = data.h1304
        b02.b0205Name = data.h1305
        this.$http
            .post(operateB02Info, b02)
            .then((res) => {
              this.listQuery()
              this.imgVisible = false;
              this.videoVisible = false;
              this.visible = false;
            })
            .catch((err) => {

            });
      }else if(this.modalTitle === '三维模型上传'){
        const data = this.$refs.modelInfoItem.mediaInfoItem
        const b02 = {}
        b02.b0101 = this.queryInfo.b0101
        b02.flag = 'save'
        b02.b0202 = '5'
        b02.b0203 = data.h1303
        b02.b0205 = data.h1304
        b02.b0205Name = data.h1305
        this.$http
            .post(operateB02Info, b02)
            .then((res) => {
              this.listQuery()
              this.imgVisible = false;
              this.modelVisible = false;
              this.visible = false;
            })
            .catch((err) => {

            });
      }
    },
    listQuery(){
      this.$http
          .post(getB02InfoList, this.queryInfo)
          .then((res) => {
            this.createInformationDate(res.result.list)
            this.queryInfo.pageNum = res.result.pageNum
            this.queryInfo.pageSize = res.result.pageSize
            this.queryInfo.hasNextPage = res.result.hasNextPage
            this.queryInfo.hasPreviousPage = res.result.hasPreviousPage
            this.queryInfo.nextPage = res.result.nextPage
            this.queryInfo.prePage = res.result.prePage
            this.queryInfo.pages = res.result.pages
          })
          .catch((err) => {

          });
    },
    currentPageChange(pageNum){
      this.queryInfo.pageNum = pageNum
      this.listQuery()
    },
    //表单处理
    queryDetail(row) {
      this.modalTitle = "查看";
      this.okButtonDisabled = true;
      this.visible = true;
      this.objectInfo.b0101 = row.b0101;
      this.saveFlag = true;
      this.flag = 'query'
    },
    delBatch(){
      const b0201ListForDel = []
      this.informationDate.forEach(item =>{
        if(item.checked){
          b0201ListForDel.push(item.b0201)
        }
      })
      this.$http
          .post(operateB02Info, {flag: 'delete',b0201ListForDel: b0201ListForDel})
          .then((res) => {
            this.listQuery()
          })
          .catch((err) => {

          });
    },
    del(b0201){
      const b0201ListForDel = []
      b0201ListForDel.push(b0201)
      this.$http
          .post(operateB02Info, {flag: 'delete',b0201ListForDel: b0201ListForDel})
          .then((res) => {
            this.listQuery()
          })
          .catch((err) => {

          });
    }
  },
};
</script>

<style lang="less" scoped>
.permission {
  height: 100%;

  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }
  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;
    .btn1 {
      height: 40px;
      background: #2db7f5;
      border: 1px solid #2db7f5;
      border-radius: 4px 0 0 4px;
    }
    .btn-con {
      background: #ed3f14;
      border: 1px solid #ed3f14;
      border-radius: 0 4px 4px 0;
    }
  }
  .list-information{
    margin-top: 30px;
    ul{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      grid-column-gap:20px;
      grid-row-gap: 20px;
      
      li{
        background: #fff;
        box-shadow: 0 0 5px #88888829;
        padding: 20px 30px;
        border-radius: 6px;

        .item-top{
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .item-subtitle{
            font-size: 16px;
            color:#000;
            font-weight: 560;
          }
        }
        .item-bottom{
          border-top:1px solid #cccccc61;
          padding-top: 20px;
          img{
            width: 100%;
            height: 160px;
            border-radius: 4px;
            margin-bottom: 20px;
          }
          .btn2 {
            width: 50%;
            text-align: center;
            height: 30px;
            background: #2db7f5;
            border: 1px solid #2db7f5;
            border-radius: 4px 0 0 4px;

            
          }
          .btn2-con {
            background: #ed3f14;
            border: 1px solid #ed3f14;
            border-radius: 0 4px 4px 0;
          }
        }
      }
    }
  }
  /deep/ .ep-button span{
    display: flex;
    justify-content: center !important;
  }
}
</style>
